<template>
  <a-card style="width: 100%">
    <a-button slot="title" @click="$router.back()" type="link" icon="arrow-left" title="返回上一级">返回上一级</a-button>
    <a-descriptions title="举报信息详情页" bordered size="small">
      <a-descriptions-item label="文件编号">
        {{reportInfo.id}}
      </a-descriptions-item>
      <a-descriptions-item label="处理人">
        {{reportInfo.handlerAdmin ? reportInfo.handlerAdmin.userName : ''}}
      </a-descriptions-item>
      <a-descriptions-item label="处理人类型">
        <a-tag
            class="cursor"
            :color="reportInfo.handlerAdmin ? reportInfo.handlerAdmin.type === 1 ? 'blue': 'green' : ''"
        >
          {{ reportInfo.handlerAdmin ? reportInfo.handlerAdmin.type === 1 ? '超级管理员': '管理员' : ''}}
        </a-tag>
      </a-descriptions-item>


      <a-descriptions-item label="处理状态">
        <a-tag
            class="cursor"
            :color="reportInfo.reportStatus === 0 ? 'orange': reportInfo.reportStatus === 1 ? 'green' : 'red'"
        >
          {{ reportInfo.reportStatus === 0 ? '待处理': reportInfo.reportStatus === 1 ? '已处理' : '已驳回'}}
        </a-tag>
      </a-descriptions-item>

      <a-descriptions-item label="举报类型">
        {{reportInfo.reportType}}
      </a-descriptions-item>

      <a-descriptions-item label="举报时间">
        {{$moment(reportInfo.reportPushTime).format('yyyy-MM-DD HH:mm:ss')}}
      </a-descriptions-item>

      <a-descriptions-item :span="3" v-if="reportInfo.reportImageList && reportInfo.reportImageList.length > 0" label="举报材料">
        <img width="200" height="100" v-for="(img,index) in reportInfo.reportImageList || []" :src="img" :key="index"/>
      </a-descriptions-item>

      <a-descriptions-item label="举报原因">
        {{reportInfo.reportWhy}}
      </a-descriptions-item>

      <a-descriptions-item label="处理结果" :span="2">
        {{reportInfo.reportResult}}
      </a-descriptions-item>

      <a-descriptions-item label="处理结果描述" :span="3">
        {{reportInfo.reportBeizhu}}
      </a-descriptions-item>

      <a-descriptions-item label="举报人信息" :span="3">
        <div>
          <div class="userInfo" v-if="reportInfo.reportUser">
            <div><span class="title">类型：</span>
              <a-tag
                  class="cursor"
                  :color="reportInfo.reportUser ? reportInfo.reportUser.type === 1 ? 'blue': reportInfo.reportUser.type === 2 ? 'green' : '' : ''"
              >
                {{ reportInfo.reportUser ? reportInfo.reportUser.type === 1 ? '超级管理员': reportInfo.reportUser.type === 2 ? '管理员' : '用户' : ''}}
              </a-tag>
            </div>
            <div><span class="title">用户名：</span>{{reportInfo.reportUser.userName}}</div>
            <div><span class="title">用户头像：</span>
              <a-avatar class="cursor" title="用户详情" @click="$router.push({name:'userinfo',params:{userId:$encry(reportInfo.reportUser.userId)}})" :src="reportInfo.reportUser.avatar"/>
            </div>
            <div><span class="title">用户头衔：</span><a-tag class="cursor" v-for="(tag,index) in reportInfo.reportUser.rankList || []" :color="tag.rankColor" :key="index">{{tag.rankName}}</a-tag></div>
          </div>
        </div>
      </a-descriptions-item>

      <a-descriptions-item label="资源及发布人信息" :span="3">
        <div class="fileInfo" v-if="reportInfo.resourceVo && reportInfo.resourceVo.user">
          <span class="title">资源编号：</span>{{reportInfo.resourceVo.resId}} <br/>
          <span class="title">发布人用户名：</span>{{reportInfo.resourceVo.user.userName}} <br/>
          <span class="title">发布人类型：</span>
          <a-tag
              class="cursor"
              :color="reportInfo.resourceVo.user ? reportInfo.resourceVo.user.type === 1 ? 'blue': reportInfo.resourceVo.user.type === 2 ? 'green' : '' : ''"
          >
            {{ reportInfo.resourceVo.user ? reportInfo.resourceVo.user.type === 1 ? '超级管理员': reportInfo.resourceVo.user.type === 2 ? '管理员' : '用户' : ''}}
          </a-tag>
          <br/>
          <span class="title">发布人头衔：</span>
          <a-tag class="cursor" v-for="(tag,index) in reportInfo.resourceVo.user.rankList || []" :color="tag.rankColor" :key="index">{{tag.rankName}}</a-tag>
          <br/>
          <span class="title">发布人头像：</span>
          <a-avatar class="cursor" title="用户详情" @click="$router.push({name:'userinfo',params:{userId:$encry(reportInfo.resourceVo.user.userId)}})" :src="reportInfo.resourceVo.user.avatar"/>
          <br/>
          <span class="title">资源标题：</span>{{reportInfo.resourceVo.resTitle}} <br/>
          <span class="title">资源内容：</span>{{reportInfo.resourceVo.resDesc | textFilter}} <br/>
          <span class="title">资源标签：</span>
          <a-space>
            <a-tag v-for="tag in reportInfo.resourceVo.resTags || []" :key="tag">
              {{tag}}
            </a-tag>
          </a-space><br/>
          <span class="title">资源地址：</span>{{reportInfo.resourceVo.resUrl}} <br/>
          <span class="title">资源地址说明：</span>{{reportInfo.resourceVo.resUrlDesc}} <br/>
          <span class="title">资源发布时间：</span>{{$moment(reportInfo.resourceVo.resPushTime).format('yyyy-MM-DD HH:mm:ss')}} <br/>
        </div>
        <div v-else>资源已被删除，暂无资源信息</div>
      </a-descriptions-item>
    </a-descriptions>
  </a-card>
</template>

<script>
  import {getReportDetail} from "@/api/resourse";

  export default {
    name: "detail",
    data(){
      return {
        id:'',
        reportInfo:{}
      }
    },
    mounted() {
      const id = this.$route.params.id;
      if (id){
        this.id = this.$dencry(id);
      } else {
        this.$message.error("系统异常,请联系管理员");
        this.$router.back();
      }

      // 加载report详情
      this.loadReportInfo();
    },

    methods:{
      // 获取report详情
      async loadReportInfo(){
        const { code,data,msg } = await getReportDetail(this.id);
        if (code === 200){
          this.reportInfo = data;
        } else {
          this.$message.error(msg);
        }
      }
    }
  }
</script>

<style scoped>
.userInfo,.fileInfo{
  line-height: 30px;
}
.title{
  font-weight: 600;
}
</style>
